<template>
    <div class="contentPage">
        <div class="pageTitle">分账明细</div>
        <Search :data="params.searchData" @search="getSearch"/>
        <div class="tableBox">
            <a-table style="margin-top: 12px" :dataSource="params.dataSource" :columns="params.columns" row-key="id"
                     :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'status'">
                        <div :style="record.status === 0 ? 'color:red':''">{{record.status === 1 ? '正常' : '未上线'}}</div>
                    </template>
                </template>
            </a-table>
            <a-pagination style="margin-top: 12px" show-size-changer v-model:current="params.page"
                          :total="params.total" @showSizeChange="onShowSizeChange" @change="onShowPageChange"/>
        </div>
    </div>
</template>
<script setup>
import {onMounted, reactive} from 'vue'
import {
    getLogList, projectList,
} from '../../../api/project.js'
import Search from '../../../components/search/index.vue'
const params = reactive({
    page: 1,
    pageSize: 10,
    total: 11,
    searchData: [
        {name: '项目查询', type: 'select', val: '', key: 'projectId'},
        {name: '日期查询', type: 'picker', val: [], key: ['dateLeft', 'dateRight']},
    ],
    searchVal: {},
    dataSource: [],
    columns: [
        {title: '支付流水号', dataIndex: 'bill_no', key: 'bill_no'},
        {title: '关联店铺', dataIndex: 'mall', key: 'mall',  customRender: ({text, record}) => {
            return text?.name
        }},
        {title: '分账金额', dataIndex: 'settle_money', key: 'settle_money'},
        {title: '分账时间', dataIndex: 'date', key: 'date'},
    ],
    projectList: []
})
onMounted(() => {
    getList()
    projectList({page: 1, pageSize: 100000}).then(res => {
        params.searchData.map(item => {if(item.key === 'projectId') item.data = res.data.items})
        params.projectList = res.data.items
    })
})
const onShowPageChange = (page) => {
    params.page = page
    getList()
}
const onShowSizeChange = (current, pageSize) => {
    params.pageSize = pageSize;
    getList()
}
const getList = () => {
    let data = {
        ...params.searchVal,
        page: params.page,
        pageSize: params.pageSize,
    }
    getLogList(data).then(res => {
        params.dataSource = res.data.items
        params.total = res.data.total
    })
}
const getSearch = (e) => {
    params.searchVal = e
    getList()
}
</script>
<style scoped lang="less">
@import "./style.less";
</style>
